<template>
	<!-- 视频分享区域 -->
	<view class="video_share">
		<view class="top_row">
			<view class="row_img_name">
				<image :src="videoDetail.creator ? videoDetail.creator.avatarUrl : mvDetail.cover"></image>
				<text class="name">{{ videoDetail.creator ? videoDetail.creator.nickname : mvDetail.artistName }}</text>
			</view>
			<view class="row_share">
				<view class="iconfont icon-fenxiang"></view>
				<!-- #ifdef APP-PLUS -->
				<button open-type="share" @click="sharePage"></button>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<button open-type="share"></button>
				<!-- #endif -->
			</view>
		</view>
		<view class="bottom_row">
			<view class="name_author" v-if="JSON.stringify(mvDetail) != '{}'">{{ mvDetail.name }}-{{ mvDetail.artistName }}</view>
			<view class="name_author" v-else>{{ videoDetail.title }}</view>
		</view>
	</view>
</template>

<script>
	import { getVideoDetail, getMvDetail } from '../../api/index.js'
	export default {
		name: 'Share',
		// #ifndef APP-PLUS
		props: ['videoId', 'videoType'],
		// #endif
		// #ifdef APP-PLUS
		props: ['videoId', 'videoType', 'videoUrl'],
		// #endif
		data() {
			return {
				// video详情数据
				videoDetail: {},
				// mv详情数据
				mvDetail: {}
			}
		},
		created() {
			this.getVideoAndMvDetail(this.videoId, this.videoType)
		},
		methods: {
			async getVideoAndMvDetail (id, type) {
				if (type == 1) {
					const {data: {data: res}} = await getVideoDetail({id})
					this.videoDetail = res
				} else {
					console.log(id, type)
					const {data: {data: res}} = await getMvDetail({mvid: id})
					this.mvDetail = res
					console.log(res)
				}
			},
			// #ifdef APP-PLUS
			sharePage() {
				// app 的 分享事件 我这分享到微信好友
				uni.Share({
					provider: 'weixin', // 服务商
					type: 4, // 分享视频格式
					scene : 'WXSceneSession', // 发送给微信好友
					mediaUrl: this.videoUrl, // 音视频地址
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			}
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.video_share {
		border: 1rpx solid #C8C7CC;
		padding: 20rpx;
		width: 90vw;
		margin: 0 auto;
		border-radius: 20rpx;
		.top_row {
			display: flex;
			justify-content: space-between;
			.row_img_name {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 15rpx;
				}
			}
			.row_share {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				view {
					line-height: 100rpx;
					text-align: center;
				}
				button {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					opacity: 0;
				}
			}
		}
		.bottom_row {
			font-size: 27rpx;
			color: #C8C7CC;
		}
	}
</style>
